<template>
  <a-layout>
    <a-layout-content style="padding: 24px;" >
      <div>
        <a-row class="headRow">
          <a-col :span="12">
            <h3>实验列表</h3>
          </a-col>
        </a-row>
      </div>
      <!-- 表格内容 -->
      <a-spin :spinning="loading">
        <a-table :columns="columns" :data-source="Data" :pagination="false" :scroll="{y:'65vh'}">
          <template #bodyCell="{column, record}">
            <template v-if="column.key === 'action' ">
              <span>
                <a @click="handleCheckDetail(record)">点击进入</a>
                <a-divider type="vertical" />
              </span>
            </template>
          </template>
        </a-table>
      </a-spin>
    </a-layout-content>
  </a-layout>
</template>

<script>
import { defineComponent } from 'vue';
import { Layout, Table, Button, Space, message } from 'ant-design-vue';
import axiosInstance from "@/axios/axios.js";

export default defineComponent({
  components: {
  },
  data() {
    return {
      loading: false,
      Data: [],
      columns: [
        {
          title: '实验名',
          dataIndex: 'experiment_name',
          key: 'experiment_name'
        },
        {
          title: '描述',
          dataIndex: 'description',
          key: 'description'
        },
        {
          title: '实验人',
          dataIndex: 'creator',
          key: 'creator'
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
    };
  },
  async created() {
    // 检查登录状态
    if (!this.$cookies.get('jwt') || !sessionStorage.getItem("isLogin")) {
      message.warning('请先登录');
      this.$router.push('/login');
      return;
    }

    // 检查路由参数
    if (!this.$route.query.batch_id || !this.$route.query.grantorName) {
      message.error('缺少必要的参数');
      this.$router.push('/ChainData');
      return;
    }

    // 检查用户信息
    const username = this.$cookies.get("username");
    
    if (!username) {
      message.error('用户信息不完整，请重新登录');
      this.$router.push('/login');
      return;
    }

    this.loading = true;
    try {
      const response = await axiosInstance({
        method: "POST",
        url: "/data/getExperimentsOnChain",
        headers: {
          Authorization: `Bearer ${this.$cookies.get("jwt")}`
        },
        data: {
          username,
          grantorName: this.$route.query.grantorName,
          dataId: this.$route.query.batch_id,
        },
      });

      if (response.data?.data?.experiments) {
        this.Data = response.data.data.experiments;
        console.log("Loaded experiments:", this.Data);
      } else {
        console.warn("No experiments data in response:", response.data);
        this.Data = [];
      }
    } catch (error) {
      console.error('获取实验数据失败:', error);
      if (error.response?.status === 401) {
        message.error('登录已过期，请重新登录');
        this.$router.push('/login');
      } else if (error.response?.status === 403) {
        message.error('没有访问权限');
        this.$router.push('/ChainData');
      } else {
        message.error(`获取数据失败: ${error.response?.data?.message || error.message}`);
      }
    } finally {
      this.loading = false;
    }
  },
  methods: {
    handleCheckDetail(record) {
      if (!record.experiment_id) {
        message.error('实验ID不存在');
        return;
      }

      this.$router.push({
        path: '/ChainData/Image',
        query: {
          experiment_id: record.experiment_id,
          grantorName: this.$route.query.grantorName,
          experiment_set_name: this.$route.query.experiment_set_name,
          experiment_batch_name: this.$route.query.experiment_batch_name,
          experiment_name: record.experiment_name,
        }
      });
    }
  }
});
</script>

<style scoped>
.headRow {
  margin: 20px;
}
</style>
